<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<title>Polla mundialista</title>

	<link href="#{request.contextPath}/css/style3.css" rel="stylesheet"
		type="text/css" />

	<script src="#{request.contextPath}/js/polla.js" type="text/javascript"></script>

</h:head>
<h:body>

	<h:form id="formLoggin">

		<div>
			<h:panelGrid columns="2" cellpadding="5" id="panelLogin">
				<h:outputLink id="loginLink" value="javascript:void(0)"
					style="margin-left: 400px;" onclick="PF('dlgLogin').show()"
					disabled="#{loginBean.loggedIn}" title="login">
					<p:graphicImage value="/images/login-icon.png" />
				</h:outputLink>
				<h:outputLink id="logoutLink" value="javascript:void(0)"
					disabled="#{not loginBean.loggedIn}"
					onclick="PF('dlgLogout').show()" title="logout">
					<p:graphicImage value="/images/logout-icon.png" />
				</h:outputLink>
			</h:panelGrid>
		</div>

		<p:growl id="growl" showDetail="true" life="3000" />
		<p:idleMonitor timeout="300000">
			<p:ajax event="idle" listener="#{loginBean.inactividad()}"
				update="growl" />
			<p:ajax event="active" listener="#{loginBean.logoutInactividad()}"
				update="growl" />
		</p:idleMonitor>
	</h:form>
	<h:form id="formDialogLogin">
		<p:dialog id="dialogLogin" header="Login" widgetVar="dlgLogin"
			resizable="false" position="top" styleClass="my-dialogs">

			<h:panelGrid columns="2" cellpadding="5">
				<h:outputLabel for="username" value="Username:" />
				<p:inputText value="#{loginBean.username}" id="username"
					required="true" label="username" />

				<h:outputLabel for="password" value="Password:" />
				<h:inputSecret value="#{loginBean.password}" id="password"
					required="true" label="password" />

				<f:facet name="footer">
					<p:commandButton id="loginButton" value="Login"
						update=":formLoggin:growl, :formContent:dockTop, :formLoggin:panelLogin"
						actionListener="#{loginBean.login}"
						oncomplete="handleLoginRequest(xhr, status, args)" />
				</f:facet>
			</h:panelGrid>

		</p:dialog>
	</h:form>
	<h:form id="formDialogLogout">
		<p:dialog id="dialogLogout" header="Logout" widgetVar="dlgLogout"
			resizable="false" position="top" styleClass="my-dialogs">
			<h:outputText value="En verdad deseas cerrar sesión?" />

			<h:panelGrid columns="2" cellpadding="5">
				<f:facet name="footer">
					<p:commandButton id="logoutButton" value="Salir"
						update=":formLoggin:growl, :formContent:dockTop, :formLoggin:panelLogin"
						actionListener="#{loginBean.logout}"
						oncomplete="handleLogoutRequest(xhr, status, args)" />
					<p:commandButton id="logoutButtonCancel" value="Cancelar"
						oncomplete="handleLogoutRequest(xhr, status, args)" />
				</f:facet>
			</h:panelGrid>

		</p:dialog>

	</h:form>

	<h:form id="formContent">

		<h:panelGrid width="100%" border="0" cellpadding="5" cellspacing="5"
			height="450" columns="2">
			<p:column width="20%">
				<p:stack icon="/images/dock/stack.png" expanded="true" id="dockTop">

					<p:menuitem value="Mundial" icon="/images/dock/mundial.png"
						action="mundial" ajax="false" />
					<p:menuitem value="Ranking" icon="/images/dock/comova.png"
						action="ranking" ajax="false" />
					<p:menuitem value="Marcadores" icon="/images/dock/marcadores.png"
						action="marcadores" ajax="false"
						disabled="#{not loginBean.loggedIn}" />
					<p:menuitem value="Perfil" icon="/images/dock/perfil.png"
						action="perfil" ajax="false" disabled="#{not loginBean.loggedIn}" />
					<p:menuitem value="Reglas" icon="/images/dock/rules.png"
						action="reglas" ajax="false" />
					<p:menuitem value="Premios" icon="/images/dock/premios.png"
						action="premios" ajax="false" />
					<p:menuitem value="Administracion"
						icon="/images/dock/administrator.png" action="administracion"
						ajax="false" rendered="#{loginBean.administrador}" />

				</p:stack>
			</p:column>
			<p:column width="80%">
				<div>
					<ui:insert name="body">
						<!-- Composite content here -->
					</ui:insert>
				</div>
			</p:column>
		</h:panelGrid>

	</h:form>

	<h:form id="formDialogRules">

		<p:dialog header="Puntos Otorgados en esta Fase"
			widgetVar="reglaDialog" modal="true" showEffect="fade"
			hideEffect="fade" resizable="false" position="top"
			styleClass="my-dialogs">
			<p:outputPanel id="reglaDetail" style="text-align:center;"
				layout="block">
				<br />
				<h:outputText value="#{reglasBean.reglaSeleccionada.descripcion}"
					style="color:Blue" />
				<br />

			</p:outputPanel>
		</p:dialog>

	</h:form>

	<h:form id="formDialogUser">

		<p:dialog
			header="Marcadores ingresados por el usuario #{rankingBean.usuarioSeleccionado.nombres}"
			widgetVar="userDialog" modal="true" showEffect="fade"
			hideEffect="fade" position="top" styleClass="my-dialogs_ranking"
			resizable="false">

			<p:outputPanel id="userDetail" style="text-align:center;"
				layout="block">
				<div class="polla_area_ranking">

					<p:tabView value="#{rankingBean.fases}" var="fase"
						scrollable="true">
						<p:tab title="#{fase.nombre}">
							<p:dataGrid var="partido" value="#{fase.partidoList}" columns="1"
								rows="8" paginator="false">
								<h:panelGrid columns="3" width="500" styleClass="polla_panel"
									columnClasses="area_alignmentLeft, area_alignmentRight"
									id="panelPartido">
									<h:panelGroup>
										<h:panelGrid columns="3"
											columnClasses="image_left, alignmentLeft, alignmentRight"
											width="200">
											<p:graphicImage
												value="/images/escudos/#{partido.idequipoUno.escudo}"
												styleClass="image_left" />

											<h:outputText value="#{partido.idequipoUno.nombre}"
												id="slide" />
											<h:outputText styleClass="marcador-input"
												value="#{rankingBean.marcadores.get(partido.idpartido).marcadorUno}" />
										</h:panelGrid>
									</h:panelGroup>
									<h:panelGroup>
										<h:panelGrid columns="3"
											columnClasses="alignmentLeft, alignmentRight, image_right"
											width="200">
											<h:outputText styleClass="marcador-input"
												value="#{rankingBean.marcadores.get(partido.idpartido).marcadorDos}" />

											<h:outputText value="#{partido.idequipoDos.nombre}"
												id="slide2" />

											<p:graphicImage
												value="/images/escudos/#{partido.idequipoDos.escudo}"
												styleClass="image_right" />
										</h:panelGrid>
									</h:panelGroup>

								</h:panelGrid>

							</p:dataGrid>

						</p:tab>
					</p:tabView>
				</div>

			</p:outputPanel>
		</p:dialog>

	</h:form>

	<h:form id="formMarcadores">

		<p:dialog header="Marcadores ingresados por los usuarios"
			widgetVar="marcadorDialog" modal="true" showEffect="fade"
			hideEffect="fade" position="top" styleClass="my-dialogs_ranking"
			resizable="false">

			<p:scrollPanel id="marcadorDetail" style="width:630px;height:500px;text-align:center;"
				layout="block">
				<div class="polla_area_ranking">

					<p:dataTable id="tbl" value="#{administracionBean.marcadores}"
						var="marcador" style="margin-bottom:20px">

						<p:column>
							<f:facet name="header">
								<h:outputText value="Usuario" />
							</f:facet>
							<h:outputText
								value="#{marcador.idusuario.nombres} #{marcador.idusuario.apellidos}" />
						</p:column>

						<p:column>
							<f:facet name="header">
								<h:outputText
									value="#{administracionBean.partido.idequipoUno.nombre}" />
							</f:facet>
							<h:outputText value="#{marcador.marcadorUno}" />
						</p:column>

						<p:column>
							<f:facet name="header">
								<h:outputText
									value="#{administracionBean.partido.idequipoDos.nombre}" />
							</f:facet>
							<h:outputText value="#{marcador.marcadorDos}" />
						</p:column>

					</p:dataTable>
				</div>
			</p:scrollPanel>
		</p:dialog>

	</h:form>

	<script type="text/javascript">
	function handleLoginRequest(xhr, status, args) {
        if(args.validationFailed || !args.loggedIn) {
            PF('dlgLogin').jq.effect("shake", { times:5 }, 100);
        } 
        else {
            PF('dlgLogin').hide();
            $('#loginLink').fadeOut();
        }
    }
	function handleLogoutRequest(xhr, status, args) {
            PF('dlgLogout').hide();
            $('#logoutLink').fadeOut();
    }
</script>

</h:body>
</html>